<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink">
			<block slot="content">上传</block>
		</cu-custom>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">描述</view>
				<input placeholder="请输入你的出售车辆的描述" name="input" v-model="model.info"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">价格</view>
				<input placeholder="请输入你的出售价格" name="input" v-model="model.price"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input placeholder="请输入你的联系方式" name="input" v-model="model.phone"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					上传你的电动车图片
				</view>
				<view class="action">
					{{model.image.length}}/4
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in model.image" v-if="model.image" :key="index"
						@tap="ViewImage" :data-url="item">
						<image :src="item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="model.image.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</form>
		<!-- 印章效果 -->
		<view class="seal" v-if="show" style="position: absolute;right: 20px;top: 150px;">
			<view class="seal-son">
				<span v-if="types === 1"
					style="text-align: center;font-size: 25px;color: #B4B4B4;font-weight: 900;">已通过</span>
				<span v-if="types === 0 && model.info"
					style="text-align: center;font-size: 25px;color: #B4B4B4;font-weight: 900;">待审批</span>
				<span v-if="errs"
					style="text-align: center;font-size: 25px;color: #B4B4B4;font-weight: 900;">未通过</span>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue margin-tb-sm lg" @click="fetch" v-if="types === 2 && !errs">确定</button>
			<button class="cu-btn bg-red margin-tb-sm lg" @click="putdata" v-if="errs">确定</button>
			<!-- 			<button class="cu-btn bg-red margin-tb-sm lg" v-if="err || (errs && !model.info)">审核未通过 请重新上传</button>
			<button class="cu-btn bg-red margin-tb-sm lg" v-if="types === 1">已通过</button> -->
			<button class="cu-btn bg-red margin-tb-sm lg" v-if="change || types === 1" @click="changeinfo">修改</button>
			<button class="cu-btn bg-red margin-tb-sm lg" v-if="change || types === 1"
				@click="consoleupload">取消上传</button>
			<!-- 			<button class="cu-btn block bg-blue margin-tb-sm lg" v-if="types === 0 && model.info">
				<text class="cuIcon-loading2 cuIconfont-spin"></text>审核中</button> -->
		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					image: [],
					type: 0,
					number: 0,
					status: 0
				},
				models: {},
				id: '',
				ids: '',
				types: 2,
				err: false,
				errs: false,
				change: false,
				show:false
			};
		},
		methods: {
			ChooseImage() {
				let that = this
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res, '21')
						if (that.model.image.length != 0) {
							that.model.image = that.model.image.concat(res.tempFilePaths)
						} else {
							that.model.image = res.tempFilePaths
						}
						for (let i = 0; i < that.model.image.length; i++) {
							uni.uploadFile({
								url: 'http://localhost:8070/admin/api/upload', //仅为示例，非真实的接口地址
								filePath: that.model.image[i],
								name: 'file',
								header: {
									"Content-Type": "multipart/form-data",
								},
								formData: {
									'user': 'test'
								},
								success: (res) => {
									const data = JSON.parse(res.data)
									console.log(res)
									that.model.image[i] = data.url
									// console.log(that.model.image[0])
								}
							})
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.model.image,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '亲爱的同学',
					content: '确定要删除这张照片吗？',
					cancelText: '再想想',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.model.image.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			async fetch() {
				let that = this
				if (this.model.name && this.model.info &&
					this.model.price && this.model.phone && this.model.image) {
					if (that.model._id) {
						that.model._id = null
					}
					const res = await this.$https.post("/rest/Herost", this.model);
					this.item = res.data;
					if (res.data) {
						uni.showToast({
							title: '上传成功',
							duration: 2000,
							icon: 'success'
						});
						that.getData()
					} else {
						uni.showToast({
							title: '上传失败',
							duration: 2000,
							icon: 'error'
						});
					}
				} else {
					uni.showToast({
						title: '请填写数据',
						duration: 2000,
						icon: 'error'
					});
				}
			},
			changeinfo() {
				let that = this
				that.model.type = 0
				that.$https.put(`/heros/${that.model._id}`, that.model).then(res => {
					if (res.data) {
						uni.showToast({
							title: '修改成功',
							duration: 2000,
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '修改失败',
							duration: 2000,
							icon: 'error'
						});
					}
					this.getData()
				})
			},
			consoleupload() {
				let that = this
				that.$https.delete(`/heros/${that.model._id}`).then(res => {
					if (res.data.success) {
						uni.showToast({
							title: '删除成功',
							duration: 2000,
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '删除失败',
							duration: 2000,
							icon: 'error'
						});
					}
					that.getData()
				})
			},
			putdata() {
				let that = this
				that.errs = false
				that.model.type = 0
				that.$https.put(`/heros/${that.model._id}`,that.model).then(res=>{
					that.getData()
				})
			},
			async getData() {
				let that = this
				that.model.name = uni.getStorageSync('nickName')
				that.models.nickName = uni.getStorageSync('nickName')
				const gentle = uni.getStorageSync('gender')
				if (gentle === 1) {
					that.model.gentle = '男'
				} else {
					that.model.gentle = '女'
				}
				that.model.icon = uni.getStorageSync('avatarUrl')
				const data = await that.$https.post(`/rest/Heros`, that.models);
				console.log('2131232', data)
				if (data.data.length >= 1) {
					that.show = true
					if (data.data.length > 1) {
						for (let i = data.data.length - 1; i >= 0; i--) {
							if (data.data[i].type == 2) {
								data.data.splice(i, 1);
								that.err = true
							}
						}
					}
					console.log(data, 'asds')
					if (data.data[0].type == 1) {
						that.types = 1
						that.model = data.data[0]
					}
					if (data.data[0].type == 2) {
						that.types = 2
						that.errs = true
						that.model = data.data[0]
					}
					if (data.data[0].type == 0) {
						that.types = 0
						that.model = data.data[0]
						that.change = true
					}
				} else {
					that.model.info = ''
					that.show = false
					that.model.price = ''
					that.model.image = []
					that.model.phone = ''
					that.model.number = 0
					that.model.status = 0
					that.model.type = 0
					that.models = {}
					that.id = ''
					that.ids = ''
					that.types = 2
					that.err = false
					that.errs = false
					that.change = false
				}
			}
		},
		created() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.seal {
		width: 130px;
		height: 130px;
		border: solid 6px #B4B4B4;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.8);
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.seal-son {
		width: 110px;
		height: 110px;
		border: solid 2px #B4B4B4;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.8);
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
